@import "_function";

.list-page{
header{
  .bc(#cf4cff);
  .p(0,30,0,30);
  .oh();
  .top{
    .oh;
  }
  .scan{
    .fl();
    background-image: url("../img/home_scan.png");
    .w(60);
    .h(70);
    .bgs(60,70);
    .m(8,0,8,8);
  }
  form{
    .w(500);
    .oh();
    .fl();
    .bdr(25);
    .h(50);
    .m(18,44,18,26);
    .bc(#fff);
    opacity: 0.7;
    input{
      .fl();
      .bn();
      .lh(50);
      .h(50);
      .w(430);
      .bc(#fff);
      .ti(38);
      .fs(26);
      .c(#616161);
      .utn();
    }
    .btn{
      .fl();
      background: url("../img/home_search_btn.png") transparent;
      .w(30);
      .h(30);
      .bs(30,30);
      .bn();
      .mt(10);
    }
  }
  .message{
    .fl();
    background-image: url("../img/home_message.png");
    .w(42);
    .h(70);
    .bgs(42,70);
    .mt(9);
  }
  .heade{
    background-color: #cf4cff;
    .oh;
    .list_top{
      display: flex;
      .p(0,16, 0 ,0);
      flex-flow: row nowrap;
      justify-content: space-between;
      .colligate,.sales,.sizer{
        .lh(40);
        .oh();
        .p(0,6,0,6);
        .fs(28);
        .c (#ffffff);
        h3{
          .fs(28);
          .c (#ffffff);
          .fl();
        }
      }
      .sizer{
        img{
          .mt(6);
          .w(25);
          .h(25);
          .fl();
          .ml(6);
        }
      }
      .colligate{
        border: 1px solid transparent;
        img{
          .w(25);
          .h(14);
          .mt(12);
        }
      }
      .on{
        border: 1px solid #a441ff;
        .bc(#a441ff);
        .bdr(6);
      }
    }
  }
}
.more-sort{
  display: block;
  position: absolute;
  background-color: #cf4cff;
  .w(154);
  .ml(30);
  li{
    text-align: center;
    .fs(28);
    .c (#ffffff);
    .lh(34);
  }
  li~li{
    .mt(6);
  }
  .on{
    background-color: #a441ff;
  }
}
.main{
  .p(0,30,0,30);
  .sum{
    .oh();
    .mt(22);
    .w(690);
    .sum_left{
      .fl();
      .mt(8);
      a{
        img{
          .w(280);
          .h(262);
        }
      }
    }
    .sum_right{
      .fl();
      .ml(26);
      h3{
        .fs(24);
        .c(#a441ff);
        .w(374);
        .h(66);
        .lh(40);
      }
      h4{
       .mt(18);
       .fs(20);
       .lh(28);
        .oh();
       i{
         .fl();
        .c(#666666);
         .p(0,6,0,6);
         border: 1px solid #666666;
         .br(7);
         .mr(12);
       }
       b{
         .fl();
         .c(#666666);
         .w(60);
         border: 1px solid #666666;
         .br(7);
         .tc();
       }
     }
      h5{
        .mt(18);
        .fs(24);
        .c(#ff3352);
        span{
          .fs(48);
          .c(#ff3352);
        }
      }
      button{
        .fs(24);
        .c(#ffffff);
        .p(0,12,0,12);
        .h(40);
        .tc();
        .bc(#ff3352);
        border: 1px solid #ff3352;
        .br(6);
        .mt(18);
      }
    }
  }
}
}